<template>
    <view class="modify-password-page">
        <view class="page-header">
            <uni-icons type="arrowleft" size="24" @click="goBack"></uni-icons>
            <text class="page-title">修改提现密码</text>
        </view>

        <view class="form-container">
            <!-- 手机号码 -->
            <view class="form-item">
                <text class="label">手机号码</text>
                <view class="input-group">
                    <input type="number" v-model="phone"  placeholder="请输入手机号码" class="input" />
                </view>
            </view>

            <!-- 验证码 -->
            <view class="form-item">
                <text class="label">验证码</text>
                <view class="input-group">
                    <input type="number" v-model="code" placeholder="请输入验证码" class="input" />
                    <button class="code-btn" @click="sendCode" :disabled="countdown > 0">
                        {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                    </button>
                </view>
            </view>

            <!-- 新密码 -->
            <view class="form-item">
                <text class="label">新提现密码</text>
                <view class="input-group">
                    <input type="password" v-model="newPassword" placeholder="请设置6-18位数字密码" class="input" />
                </view>
            </view>

            <!-- 确认密码 -->
            <view class="form-item">
                <text class="label">确认密码</text>
                <view class="input-group">
                    <input type="password" v-model="confirmPassword" placeholder="请再次输入密码" class="input" />
                </view>
            </view>

            <!-- 提交按钮 -->
            <button class="submit-btn" @click="submit">确认修改</button>
        </view>
    </view>
</template>

<script>
// 假设已引入apiConfig和request工具
import { request, initBaseUrl, getFullImageUrl } from '../../../../utils/request';
export default {
    data() {
        return {
            phone: '', // 手机号码
            code: '', // 验证码
            newPassword: '', // 新密码
            confirmPassword: '', // 确认密码
            countdown: 0, // 倒计时
            timer: null // 定时器
        };
    },
    onLoad() {
        // 这里可以从本地存储或接口获取用户手机号码
        this.phone = uni.getStorageSync('userInfo')?.phone || '';
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },

        // 发送验证码
        sendCode() {
            if (!this.phone) {
                uni.showToast({
                    title: '请输入手机号码',
                    icon: 'none'
                });
                return;
            }
            request({
                url: 'Sms/send',
                method: 'POST',
                data: {
                    mobile: this.phone,
                    event: 'withdraw_password' // 验证码类型，根据后端要求设置
                }
            }).then(res => {
                if (res.success) {
                    uni.showToast({
                        title: '验证码发送成功',
                        icon: 'success'
                    });
                } else {
                    uni.showToast({
                        title: res.message || '验证码发送失败',
                        icon: 'none'
                    });
                }
            }).catch(err => {
                uni.showToast({
                    title: '网络错误，请重试',
                    icon: 'none'
                });
            });
            // 开始倒计时
            this.countdown = 60;
            this.timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(this.timer);
                }
            }, 1000);
        },
        // 提交修改
        submit() {
            // 表单验证
            if (!this.code) {
                uni.showToast({
                    title: '请输入验证码',
                    icon: 'none'
                });
                return;
            }

            if (!this.newPassword) {
                uni.showToast({
                    title: '请设置新密码',
                    icon: 'none'
                });
                return;
            }

            if (this.newPassword.length < 6 || this.newPassword.length > 18) {
                uni.showToast({
                    title: '密码长度必须为6-18位',
                    icon: 'none'
                });
                return;
            }

            if (this.newPassword !== this.confirmPassword) {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                });
                return;
            }
            // 调用修改密码接口
            request({
                url: 'Sms/check',
                method: 'POST',
                data: {
                    mobile: this.phone,
                    captcha: this.code,
                    event: 'withdraw_password',
                    newPassword: this.newPassword
                }
            }).then(res => {
                if (res.code == 1) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'success',
                        duration: 1500
                    });

                    // 延迟返回上一页
                    setTimeout(() => {
                        this.goBack();
                    }, 1500);
                } else {
                    uni.showToast({
                        title: res.msg || '修改失败，请重试',
                        icon: 'none'
                    });
                }
            }).catch(err => {
                uni.showToast({
                    title: '网络错误，请重试',
                    icon: 'none'
                });
            });
        }
    },
    onUnload() {
        // 清除定时器
        if (this.timer) {
            clearInterval(this.timer);
        }
    }
};
</script>

<style lang="scss" scoped>
.modify-password-page {
    padding: 20rpx;
    background-color: #F2F3F8;
    min-height: 100vh;

    .page-header {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        margin-bottom: 30rpx;

        .page-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-left: 20rpx;
        }
    }

    .form-container {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;

        .form-item {
            margin-bottom: 30rpx;

            .label {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 10rpx;
                display: block;
            }

            .input-group {
                display: flex;
                align-items: center;

                .input {
                    flex: 1;
                    height: 80rpx;
                    border: 1rpx solid #ddd;
                    border-radius: 10rpx;
                    padding: 0 20rpx;
                    font-size: 28rpx;
                }

                .code-btn {
                    width: 200rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    background-color: #007AFF;
                    color: #fff;
                    border-radius: 10rpx;
                    margin-left: 20rpx;
                    font-size: 26rpx;
                }
            }
        }

        .submit-btn {
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            background-color: #007AFF;
            color: #fff;
            border-radius: 10rpx;
            font-size: 32rpx;
            margin-top: 40rpx;
        }
    }
}
</style>